<template>
	<view class="index-content">
		<view class="index-content-header" :style="{'background-image':'url('+indexswiper+')'}">
			<view class="content-header-nav" :style="bgColor?`background-color:${bgColor}`:''">
				<view class="content-header-nav-top" :style="gps?`height:${gps+'px'}`:``"></view>
				<view class="content-header-nav-bottom">
					<img :src="queryIcon('searchbtn')" mode="aspectFill" alt="" class="header-left-img"
						@click="goindexseach" />
					<img :src="queryIcon('logo1')" alt="" class="header-right-img" />
				</view>
			</view>
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="400"
				@change="swiperchange">
				<swiper-item v-for="(item,index) in banner" :key="index"><img mode="aspectFill" :src="item?.img?.url"
						alt="" :class="index==0?'content-header-img':'content-header-imgtwo'" /></swiper-item>
			</swiper>
			<view class="content-header-dots">
				<!-- <view class="header-dots" :class="dotindex === 1 ? 'header-dot-active' : ''"></view> -->
				<view class="header-dots" :class="dotindex === 0 ? 'header-dot-active' : ''"></view>
				<view class="header-dots" :class="dotindex === 1 ? 'header-dot-active' : ''"></view>
			</view>
		</view>
		<u-popup :safe-area-inset-bottom="false" mode="center" :round="20" :show="showtwo" :disabled="true">
			<view class="popularlogin">
				<img :src="queryIconImage('weixinlogo1')" alt="" style="width: 60rpx;height: 60rpx;">
				<p class="popularlogin-text">登录后查看</p>
				<view class="popularlogin-btn">
					<view class="popularlogin-btn-left" @click="loginsubmit">
						<span>授权登录</span>
					</view>
					<view class="popularlogin-btn-left" style="background: #999999;" @click="cancellationbtn">
						<span>取消</span>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="index-content-body">
			<view class="content-body-header">
				<view class="body-header-left" v-for="(item, index) in headersList" :key="item.name"
					:style="item.img ? '' : 'padding: 0 20rpx;'"
					:class="headerIndex == index ? 'header-left-active' : ''" @click="headerschange(index)">
					<img :src="headerIndex == index ? item.active : item.img" alt="" v-if="item.img"
						:class="index == 3 ? 'header-left-img-css' : 'header-left-img' " />
					<span>{{ item.name }}</span>
				</view>
				<img :src="queryIconImage('indexheader4')" alt="" class="body-header-rightimg"
					@click="goquestionslist()" />
			</view>

			<!-- *********************** -->
			<view class="content-body-midel" v-if="headerIndex == 0">

				<view class="body-midel-content" v-for="(item,inde) in anylist" :key="item.id"
					@click="goquestiondeta(item)">
					<view class="midel-content-text">
						<!-- <span class="colorType">{{item.type}}</span> -->
						<view class="midel-title">{{item.title}}</view>
						<!-- <span class="midel-font">{{item.content}}</span> -->
						<img :src="queryIconImage('modelone1')" alt="" class="content-text-img" />
						<img :src="queryIconImage('questondetalogo1')" alt="" class="content-text-img"
							v-if="item.type=='悬赏提问'" />
						<img :src="queryIconImage('modelone2')" alt="" class="content-text-img"
							v-if="item.article_comment.length<1" />
					</view>

					<view class="midel-content-img" v-if="item.article_detail.length>0">
						<view class="content-img-list" v-for="(v,i) in item.article_detail" :key="v.id">
							<!-- <img mode="aspectFit" :src="v.img?.url" alt="" class="content-img-log" v-if="i<3 && v.img"> -->
							<!-- <video :src="v.video.url" class="content-img-video" v-if="i<3 && v.video"></video> -->
						</view>
					</view>
					<view class='line'></view>
				</view>
			</view>
			<view class="content-body-midelone" v-if="headerIndex == 1">

				<popularquestionsCard :popularquestionscontent="item" @goquestiondetails="goquestiondetails"
					v-for="(item,index) in popularquestionscontent" :key="item.id">

				</popularquestionsCard>
			</view>
			<view class="content-body-mideltwo" v-if="headerIndex == 2">
				<popularquestionsCard :popularquestionscontent="item" @goquestiondetails="goquestiondetails"
					v-for="(item,index) in popularquestionscontentlist" :key="item.id">
				</popularquestionsCard>
			</view>
			<view class="content-body-midelthree" v-if="headerIndex == 3">
				<answeredCard :answereddata="item" v-for="(item,index) in answereddata" :key="item.id">
				</answeredCard>
			</view>
		</view>



		<view class="index-content-card">
			<view class="content-card-nav">
				<span>热门答主</span>
				<span class="card-nav-texte" @click="gomainqueat">查看更多&nbsp;></span>
			</view>
			<swiper class="swipertwo" circular :indicator-dots="false" :autoplay="false" :interval="3000"
				:duration="400" @change="popularswiperchange">
				<swiper-item v-for="(item,index) in answerList" :key="item.id">
					<popularCard :carddata="item" :height="height"></popularCard>
				</swiper-item>
			</swiper>
			<view class="content-header-dots">
				<view class="header-dots" v-for="(item,index) in answerList" :key="item.id"
					:class="populardotindex === index ? 'header-dot-active' : ''"></view>
			</view>
		</view>
		<view class="index-content-bottom">
			<img mode="aspectFit" :src="queryImageCard(`indexcard1`)" alt="" class="content-bottom-imgtwo" />
			<!-- <img mode="aspectFit" src="../../static/indexcard2.png" alt="" class="content-bottom-imgtwo" /> -->
		</view>

		<my-tabbar :selected="selected"></my-tabbar>
	</view>
</template>

<script>
	import MyTabbar from '@/components/my-tabbar/my-tabbar.vue';
	import {
		Time
	} from "@/utils/timenew.js"
	import methods from "@/pages/index/methods.js"
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			MyTabbar
		},
		data() {
			return {
				showtwo: false,
				anylist: [],
				cardlist: [],
				answerList: [],
				popularquestionscontent: [],
				popularquestionscontentlist: [],
				bgColor: 'rgba(165, 42, 42, 0)',
				gps: '',
				height: '410rpx',
				populardotindex: 0,
				selected: 0,
				answereddata: [],
				carddata: {},
				dotindex: 0,
				headerIndex: 0,
				headersList: [{
						name: '全部'
					},
					{
						name: '热门提问',
					},
					{
						name: '公开悬赏',
					},
					{
						name: '待回答',
					}
				],
				indexswiper: ''
			};
		},
		onShow() {
			this.getData()

		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			console.log("胶囊位置信息", arr);
			//#endif
			this.getData()
		},
		computed: {
			...mapState({
				banner: state => state.remote?.banner?.data_list ?? [],
				bannerBackImg: state => state.remote?.bannerBackImg?.data_list ?? [],
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
				indexcard: state => state.remote?.indexcard?.data_list ?? [],
			})
		},
		mounted() {
			this.querySections().then(res => {
				this.indexswiper = this.queryImage("indexswiper1")
				this.headersList.map(item => {
					if (item.name == '热门提问') {
						item.img = this.queryIconImage('indexheader1')
						item.active = this.queryIconImage('headeractive1')
					}
					if (item.name == '公开悬赏') {
						item.img = this.queryIconImage('indexheader2')
						item.active = this.queryIconImage('headeractive2')
					}
					if (item.name == '待回答') {
						item.img = this.queryIconImage('indexheader3')
						item.active = this.queryIconImage('headeractive3')
					}
				})
			})
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			// console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'
			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
		methods: {
			...methods,
			queryImage(label, key = "bannerBackImg") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIconImage(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIcon(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryImageCard(label, key = "indexcard") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			getData() {
				this.$store.dispatch('remote/callActionflowOffset', {
					response_key: "getAnswerInfo",
					actionflow_name: "用户_答主信息",
					payload: {
						offset: this.offset,
						limit: this.limit,
					},
				}).then(res => {
					this.cardlist = JSON.parse(JSON.stringify(res.data.list))
					let time = Math.round(new Date())
					let score_list = []
					let zanlinkNum = 0
					this.cardlist.map(item => {
						item.tag_list = JSON.parse(item.tag_list)
						item.zanlinkList.map(eitem => {
							if (Math.abs(time - new Date(this.$utils.dateFormat(eitem.updated_at,
									"yyyy-MM-dd")) <= (30 * 24 * 60 * 60 * 1000))) {
								if (eitem.zanlink) {
									zanlinkNum = zanlinkNum + eitem.zanlink
									item[`zanlinkNum`] = zanlinkNum
								}
							}

						})
					})
					//第一层先进行筛选，找到有评分的回答者
					for (let i in this.cardlist) {
						if (this.cardlist[i].article_comment_score_aggregate.aggregate.avg.score != null) {
							this.cardlist[i].article_comment_score_aggregate.aggregate.avg.score = this
								.cardlist[i].article_comment_score_aggregate.aggregate.avg.score.toFixed(2)
							score_list.push(this.cardlist[i])
						}
					}
					console.log('分数排名', score_list);
					//不满足五个用户的情况
					if (score_list.length < 5) {
						//先进行冒泡排序
						this.bubbleSort(score_list)
						for (let i in this.cardlist) {
							if (this.cardlist[i].article_comment_score_aggregate.aggregate.avg.score == null &&
								score_list.length < 5) {
								score_list.push(this.cardlist[i])
							}
						}

						this.answerList = score_list
					}
					//满足五个的情况
					else {
						this.bubbleSort(score_list)
						for (let i = 0; i < 5; i++) {
							this.answerList.push(score_list[i])
						}
					}
					console.log('分数排名', score_list);
					console.log('认证的答主', this.cardlist);
				}).catch(err => {
					console.log('失败了,,,')
				})
				if (this.headerIndex == 0) {
					this.$store.dispatch("remote/query", {
						model: 'article',
						isloading: false,
						limit: 5,
						order_by: {
							id: 'desc'
						},
						where: {
							answer_type: {
								_eq: "公开参与"
							},
							status: {
								_eq: '展示中'
							}
						},
						field_string: 'id user_user type title content price_cny heat created_at answer_type status article_detail{id img{url} video{url}} article_visits{visit_times} article_comment{id} user{id nickname avatar{url}}',
					}).then(res => {
						console.log('全部提问', res);
						this.anylist = JSON.parse(JSON.stringify(res.data_list))
					})
				}
			},

			//排序
			bubbleSort(list) {
				var len = list.length
				for (let i = 0; i < len; i++) {
					for (let j = 0; j < len - 1 - i; j++) {
						if (list[j].article_comment_score_aggregate.aggregate.avg.score < list[j + 1]
							.article_comment_score_aggregate.aggregate.avg.score) {
							var t = list[j + 1]
							list[j + 1] = list[j]
							list[j] = t
						}
					}
				}
			},
			//排序热度
			bubbleSortHeat(list) {
				var len = list.length
				for (let i = 0; i < len; i++) {
					for (let j = 0; j < len - 1 - i; j++) {
						if (list[j].article_heat.length < list[j + 1].article_heat.length) {
							var t = list[j + 1]
							list[j + 1] = list[j]
							list[j] = t
						}
					}
				}
			},
			//跳转到登录页面
			loginsubmit() {
				uni.navigateTo({
					url: `/pages/login/login`
				})
				this.showtwo = false
			},
			/* 问题详情页 */
			goquestiondetails(id) {
				let usercoundId = uni.getStorageSync('userInfo').id
				if (usercoundId) {
					uni.navigateTo({
						url: `/pages_a/questiondetails/questiondetails?id=${id}`
					})
				} else {
					this.showtwo = true
				}


			},
			goquestiondeta(val) {



				let usercoundId = uni.getStorageSync('userInfo').id
				if (usercoundId) {
					let id = val.id
					uni.navigateTo({
						url: `/pages_a/questiondetails/questiondetails?id=${id}`
					})
				} else {
					this.showtwo = true
				}
			},

			cancellationbtn() {
				this.showtwo = false

			},
			goindexseach() {
				uni.navigateTo({
					url: "/pages_a/indexsearch/indexsearch"
				})
			},
			gomainqueat() {
				uni.switchTab({
					url: '/pages/mainquestionlist/mainquestionlist'
				});
			},
			swiperchange(e) {
				// console.log('11111111111', e);
				this.dotindex = e.detail.current;
			},
			popularswiperchange(e) {
				this.populardotindex = e.detail.current;
			},
			headerschange(id) {
				this.headerIndex = id;

				if (this.headerIndex == 1) {
					this.$store.dispatch("remote/query", {
						model: 'article',
						limit: 5,
						isloading: false,
						field_string: 'id user_user type title content price_cny heat created_at answer_type status article_visits{visit_times} user{id nickname avatar{url}} article_detail{id video{url} img{url}} article_heat{id}',
						order_by: {
							heat: 'desc'
						},
						where: {
							status: {
								_eq: "展示中"
							}
						},
					}).then(res => {
						console.log("查询文章列表", res)
						let list = []
						let add = res.data_list
						//先循环遍历有article_heat的


						this.popularquestionscontent = JSON.parse(JSON.stringify(add))
						console.log('-----------', this.popularquestionscontent);

					})
				}
				if (this.headerIndex == 2) {
					this.$store.dispatch("remote/query", {
						model: 'article',
						limit: 5,
						isloading: false,
						field_string: 'id user_user type title content price_cny created_at answer_type status article_visits{visit_times} user{id nickname avatar{url}} article_detail{id video{url} img{url}}',
						where: {
							_and: [{
								type: {
									_eq: '悬赏提问'
								}
							}, {
								answer_type: {
									_eq: "公开参与"
								}
							}, {
								status: {
									_eq: "展示中"
								}
							}]
						},
						order_by: {
							id: 'desc'
						}
					}).then(res => {
						console.log("公开悬赏文章列表", res)
						let add = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						this.popularquestionscontentlist = JSON.parse(JSON.stringify(add))
					})
				}
				if (this.headerIndex == 3) {
					this.$store.dispatch("remote/query", {
						model: 'article',
						isloading: false,
						field_string: 'id user_user type title content price_cny created_at answer_type status article_visits{visit_times} article_comment{id} user{id nickname avatar{url}}',
						where: {
							status: {
								_eq: "展示中"
							}
						},
						order_by: {
							id: 'desc'
						}
					}).then(res => {
						let add = []
						res.data_list.forEach(v => {
							if (v.article_comment.length < 1 && v.user_user != null) {
								add.push(v)
							}
						})
						this.answereddata = add.splice(0, 4)
						console.log("待回答文章列表", this.answereddata)
					})
				}
			},
			goquestionslist() {
				uni.navigateTo({
					url: '/pages_a/questionslist/questionslist'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.popularlogin {
		width: 595rpx;
		height: 370rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 20rpx 0 40rpx 0;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.popularlogin-text {
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.8);
			line-height: 40rpx;
			margin: 12rpx 0 128rpx 0
		}

		.popularlogin-btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;
			padding: 0 65rpx;

			.popularlogin-btn-left {
				width: 215rpx;
				height: 70rpx;
				background: #26C789;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #FFFFFF;
				line-height: 70rpx;
			}
		}
	}

	.midel-font {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
		margin-bottom: 32rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		margin-left: 10rpx;
	}

	.colorType {
		padding: 6rpx;
		color: #fff;
		font-size: 20rpx;
		margin: 12rpx 12rpx 12px 4rpx;
		border-radius: 10rpx;
		background-color: #F09500;

	}

	.midel-title {
		margin: 10rpx 10rpx;
		display: inline;
	}

	.line {
		width: 100%;
		background-color: #dcdcdc;
		margin-top: 30rpx;
		height: 1px;
		z-index: -1;
	}

	.content-body-mideltwo {
		width: 100%;
		z-index: 999;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 5rpx;
		margin-top: 20rpx;
	}

	.index-content {
		width: 100%;
		// height: 100vh;
		background-color: #f4f4f4;

		.index-content-header {
			width: 100%;
			height: 700rpx;
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: 50%, 50%;
			position: relative;

			.content-header-nav {
				width: 100%;
				height: 170rpx;
				background-color: rgba(247, 247, 247, 0);
				// padding-left: 30rpx;
				position: fixed;
				z-index: 999989;

				//top: 80rpx;
				// height: var(--status-bar-height);
				.content-header-nav-bottom {
					width: 100%;
					height: 32px;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					position: absolute;

					.header-left-img {
						width: 150rpx;
						height: 60rpx;
					}

					.header-right-img {
						width: 135rpx;
						height: 64rpx;
						position: fixed;
						left: 50%;
						transform: translateX(-50%);
					}
				}

			}

			.content-header-dots {
				width: 24rpx;
				height: 8rpx;
				display: flex;
				justify-content: space-between;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 190rpx;

				.header-dots {
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background-color: #fff;
					z-index: 99;
				}

				.header-dot-active {
					background-color: #f09603;
				}
			}

			.swiper {
				width: 100%;
				height: 100%;

				.content-header-img {
					width: 100%;
					height: 76%;
					position: absolute;
				}

				.content-header-imgtwo {
					width: 100%;
					height: 70%;
					position: absolute;
				}
			}


		}

		.index-content-body {
			box-sizing: border-box;
			padding: 0 27rpx;
			width: 100%;
			margin-top: -150rpx;
			position: relative;
			z-index: 10;

			.content-body-header {
				width: 100%;
				display: flex;
				z-index: 999;
				justify-content: space-between;

				.body-header-rightimg {
					width: 60rpx;
					height: 60rpx;
					z-index: 99;
				}

				.body-header-left {
					padding: 0 15rpx;
					height: 60rpx;
					// width: 100rpx;
					background-color: #fff;
					z-index: 99;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					border-radius: 15rpx;
					color: #7a7b7b;

					.header-left-img {
						width: 16rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}

					.header-left-img-css {
						width: 13rpx;
						height: 20rpx;
						margin-right: 13rpx;
					}
				}

				.header-left-active {
					color: #fff;
					background-color: #f09500;
				}
			}

			.content-body-midel {
				width: 100%;
				background-color: #fff;
				z-index: 999;
				margin-top: 20rpx;
				box-sizing: border-box;
				// padding: 20rpx;
				opacity: 1;
				border-radius: 15rpx;

				.body-midel-content {
					width: 100%;
					padding-bottom: 10rpx;
					border-radius: 15rpx;

					.midel-content-text {
						color: #4a4a4a;
						font-size: 30rpx;
						font-weight: 500;
						padding: 20rpx 0 0 20rpx;

						.content-text-img {
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
							vertical-align: middle;
						}
					}

					.midel-content-img {
						width: 100%;
						// height: 175rpx;
						margin-top: 15rpx;
						display: flex;

						.content-img-list {

							.content-img-log {
								width: 175rpx;
								height: 175rpx;
								margin: 0 12rpx;

							}

							.content-img-video {
								width: 520rpx;
								height: 210rpx;
							}
						}
					}
				}
			}

			.content-body-midelone {
				width: 100%;
				z-index: 999;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				background-color: #ffffff;
				box-sizing: border-box;
				padding: 0 5rpx;
				margin-top: 20rpx;
			}

			.content-body-midelthree {
				width: 100%;
				z-index: 999;
				margin-top: 20rpx;
			}
		}

		.index-content-card {
			box-sizing: border-box;
			padding: 0 27rpx;
			width: 100%;
			margin-top: 44rpx;
			position: relative;

			.content-header-dots {
				// width: 24rpx;
				height: 10rpx;
				display: flex;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 20rpx;

				.header-dots {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #F09500;
					z-index: 99;
					opacity: 0.4;
					margin-right: 10rpx;
				}

				.header-dot-active {
					background-color: #F09500;
					opacity: 1;
				}
			}

			.content-card-nav {
				width: 100%;
				display: flex;
				height: 42rpx;
				justify-content: space-between;
				align-items: center;
				// font-family: 阿里巴巴普惠体 2.0;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
				line-height: 42rpx;

				.card-nav-texte {
					font-size: 24rpx;
					font-weight: 500;
					line-height: 42rpx;
					color: #f09500;
				}
			}

			.swipertwo {
				width: 100%;
				height: 410rpx;
			}
		}

		.index-content-bottom {
			box-sizing: border-box;
			padding: 0 27rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;


			.content-bottom-imgone {
				width: 106%;
				// margin-right: 10%;
			}

			.content-bottom-imgtwo {
				width: 106%;
				height: 400rpx;
				margin-bottom: 150rpx;
			}
		}
	}
</style>